<template>
  <div v-loading="load">
    <div class="cert-box">
      <img :src="info.img_url" class="cart-bg" ref="certcover" />
      <span
        v-for="(item,key) in info.select_form"
        :key="key"
        class="cert-item"
        :style="setStyle(item)"
      ><span v-if="!load">{{item.value}}</span></span>
    </div>
    <div style="margin-top:10px;text-align:right">
      <el-button class="com-btn" size="mini" icon="el-icon-download" @click="downImg()">下载</el-button>
    </div>
    <canvas id="canvasId" style="display:none;"></canvas>
  </div>
</template>

<script>
export default {
  props: { cert_id: {}, active_id: {}, team_id: {} },
  data() {
    return {
      info: {
        img_url: "",
        select_form: []
      },
      width: 0,
      height: 0,
      load : true
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //下载
    downImg() {
      var img = this.$refs.certcover;
      this.width = img.width;
      this.height = img.height;
      //生成图片
      var image = new Image();
      image.setAttribute('crossorigin', 'anonymous');
      image.onload = () => {
        //绘画
        var canv = document.getElementById("canvasId");
        canv.width = this.width;
        canv.height = this.height;
        var ctx = canv.getContext("2d");
        ctx.drawImage(image, 0, 0, this.width, this.height);
        var data = this.info.select_form;
        for (var i in data) {
          ctx.fillStyle = data[i].color;
          ctx.font = data[i].fontSize + "px Arial";
          ctx.fillText(
            data[i].value,
            canv.width * data[i].rate_x + 10,
            canv.height * data[i].rate_y + 22
          );
        }
        //ctx.stroke();
        let url = canv.toDataURL("image/png");
        let a = document.createElement("a");
        let event = new MouseEvent("click");
        a.download = name;
        a.href = url;
        a.dispatchEvent(event);
      };
      image.src = this.info.img_url;
    },
    //设置样式
    setStyle(data) {
      var img = this.$refs.certcover;
      var width = this.width;
      var height = this.height;
      var left = width * data.rate_x;
      var top = 651 * data.rate_y;
      return (
        "font-size:" +
        data.fontSize +
        "px;color:" +
        data.color +
        ";left:" +
        left +
        "px;top:" +
        top +
        "px;padding: 5px 15px;"
      );
    },
    //获取证书信息
    getData() {
      this.load = true;
      this.ajaxs("activematch/matchCert", {
        data: {
          active_id: this.active_id,
          team_id: this.team_id,
          cert_id: this.cert_id
        },
        success: res => {
          this.info = res.msg;
          var image = new Image();
          image.onload = () => {
            var img = this.$refs.certcover;
            this.width = img.width;
            this.height = img.height;
            this.load = false;
          }
          image.src = this.info.img_url;
        }
      });
    }
  },
  watch: {
    cert_id() {
      this.getData();
    }
  }
};
</script>

<style>
.cert-box {
  position: relative;
}
.cart-bg {
  width: 100%;
  display: block;
}
.cert-item {
  position: absolute;
  z-index: 99;
  top: 0;
}
</style>